<template>
    <div class="w-full">
        <a-row class="w-full !mx-0">
            <a-col :xs="24" :sm="24" :md="24" :lg="24">
                <div class="bg-white p-[24px] rounded-[4px] flex items-center mb-[10px]">
                    <AlertOutlined class="text-2xl mr-[10px] text-[#333333]" />
                    <span class="mr-[20px]">当前登录账户：{{ userStore.userInfo.username }}</span>
                    <span class="mr-[20px]">登录时间：{{ userStore.date }}</span>
                    <span>登录IP：{{ userStore.userInfo.last_ip }}</span>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24">
                <Bubble placement="start" content="Hello AI" class="mb-[20px]"
                    :avatar="h(UserOutlined, { style: startBubbleStyle })" />
                <Bubble placement="end" content="Hello AI" class="mb-[20px]"
                    :avatar="h(UserOutlined, { style: endBubbleStyle })" />
                <Welcome
                    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
                    title="Hello, I'm Ant Design X"
                    description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~" />
            </a-col>
        </a-row>

        <a-row>
            <a-col flex="1 1 200px">1 1 200px</a-col>
            <a-col flex="0 1 300px">0 1 300px</a-col>
        </a-row>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, h } from 'vue';
import type { CSSProperties } from 'vue';
import useUserStore from '@/stores/user';
import { AlertOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Bubble, Welcome } from 'ant-design-x-vue';


// 框架布局样式
const startBubbleStyle: CSSProperties = {
    color: '#f56a00',
    fontSize: '24px',
    padding: '8px',
    borderRadius: '50%',
    backgroundColor: '#fde3cf',
};

const endBubbleStyle: CSSProperties = {
    color: '#ffffff',
    fontSize: '24px',
    padding: '8px',
    borderRadius: '50%',
    backgroundColor: '#87d068',
};



const userStore = useUserStore();
onMounted(() => { });
</script>